// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')

export default class EchartsConfig {
  private myChart: any
  private option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    color: ['#F4D761', '#3973F6', '#7844D7', '#DF6C7D', '#34A6D2', '#eb3a53'],
    legend: {
      orient: 'horizontal',
      x: 'center',
      data: ['授信数量', '用信数量', '授信成功数', '授信失败数'],
      icon: 'circle',
      textStyle: {
        color: [
          '#F4D761',
          '#3973F6',
          '#7844D7',
          '#DF6C7D',
          '#34A6D2',
          '#eb3a53'
        ]
      }
    },
    // calculable: true,
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [
          '03:00',
          '04:00',
          '05:00',
          '06:00',
          '07:00',
          '08:00',
          '09:00',
          '10:00',
          '11:00',
          '12:00',
          '13:00',
          '14:00',
          '15:00'
        ],
        axisLabel: {
          show: true,
          textStyle: {
            color: '#66D2EA'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        }
      }
    ],
    series: []
  }
  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption(data: any) {
    // this.option = data
    this.option.xAxis[0].data = data.xAxis.data
    this.option.series = data.series
    this.myChart.clear()
    this.myChart && this.myChart.setOption(this.option)
    var _this = this
    window.addEventListener('resize', function() {
      _this.myChart.resize()
    })
  }
}
